<template>
  <div class='aui-card--fill scroll-box card-box'>
    <div class='pane-shell'>
      <div class="action-bar">
        <div class="operation-btn">
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('tb:devicePolling:addPolling')"
                     @click="addHandle()">新增</el-button>
        </div>
      </div>
      <table-template :tableData='tableData'
                      :loading='dataListLoading'
                      :fieldManagement='false'
                      :dataList='dataList'
                      :index="true">
        <!-- <template slot="frequency-before">
          <el-table-column prop="deviceType"
                           align="center"
                           label="设备类型"
                           show-overflow-tooltip
                           min-width="80">
            <template slot-scope="scope">
              <span>{{ $store.state.EquTypeList.find(item => item.id === scope.row.deviceType).name }}</span>
            </template>
          </el-table-column>
        </template> -->
        <el-table-column :label="$t('handle')"
                         fixed='right'
                         header-align='center'
                         align='center'
                         width='180'>
          <template slot-scope='scope'>
            <el-button type='text'
                       class='warning'
                       v-if="$hasPermission('tb:devicePolling:updateStatus') && scope.row.status === 1"
                       @click="setStatus(scope.row.id, 0)"
                       size='small'>停用</el-button>
            <el-button type='text'
                       class='warning'
                       v-if="$hasPermission('tb:devicePolling:updateStatus') && scope.row.status === 0"
                       @click="setStatus(scope.row.id, 1)"
                       size='small'>启用</el-button>
            <el-button type='text'
                       class='brand'
                       v-if="$hasPermission('tb:devicePolling:updatePolling') && scope.row.status === 0"
                       @click='addOrUpdateHandle(scope.row)'
                       size='small'>修改</el-button>
            <el-button type='text'
                       class='brand'
                       @click="deviceList(scope.row)"
                       size='small'>设备列表</el-button>
          </template>
        </el-table-column>
      </table-template>
      <el-pagination :current-page='page'
                     :page-sizes='[10, 20, 50, 100]'
                     :total='total'
                     layout='total, sizes, prev, pager, next'
                     @size-change='pageSizeChangeHandle'
                     @current-change='pageCurrentChangeHandle'>
      </el-pagination>
    </div>
    <el-dialog title=""
               :visible.sync="dialogVisible"
               width="30%"
               :close-on-click-modal="false"
               :append-to-body="true"
               :close-on-press-escape="false"
               :before-close="handleClose">
      <el-form :model="dataForm"
               v-loading="dataListLoading"
               :element-loading-text="$t('loading')"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="80px">
        <el-form-item prop="dockingMethod"
                      label="对接方式"
                      :rules="required()">
          <el-select v-model="dataForm.dockingMethod"
                     clearable
                     class="width-100"
                     placeholder="请选择对接方式">
            <el-option v-for="item in dockingMethodList"
                       :key="item.dictValue"
                       :label="item.dictName"
                       :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary"
                   @click="dataFormSubmitHandle()">确 定</el-button>
      </span>
    </el-dialog>
    <DevicePollingAdd ref="addDialog"
                      @callBack="getDataList" />
    <DevicePollingUpdate ref="updateDialog"
                         @callBack="getDataList" />
    <DeviceList ref="deviceListDialog" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tableTemplate from '@/components/table-template'
import Search from '@/components/search/search'
import debounce from 'lodash/debounce'
import DevicePollingAdd from './device-polling-add.vue'
import DevicePollingUpdate from './device-polling-update.vue'
import DeviceList from './device-list.vue'
export default {
  mixins: [mixinViewModule, minFormValidate],
  name: '',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/tb/devicePolling/queryPage', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '/tb/deviceTemplate/insertTemplate', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        updateStatusURL: '/tb/devicePolling/updateStatus',
        deleteURL: '/tb/deviceTemplate/deleteTemplate', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      dialogVisible: false,
      statusOptions: [
        {
          dictName: '启用',
          dictValue: 1
        },
        {
          dictName: '停用',
          dictValue: 0
        }
      ],
      dockingMethodList: [
        {
          dictName: '第三方',
          dictValue: 1
        },
        {
          dictName: '网关透传',
          dictValue: 2
        }
      ],
      agreementList: [
        { dictValue: 1, dictName: 'modbus_tcp' },
        { dictValue: 2, dictName: 'modbus_rtu' },
        { dictValue: 4, dictName: 'DLT645_2007' }
      ],
      dataForm: {
        dockingMethod: ''
      },
      dataList: []
    }
  },
  components: { tableTemplate, Search, DevicePollingAdd, DevicePollingUpdate, DeviceList },
  computed: {
    ...mapState({
      typeList: state => state.dict.typeList
    }),
    tableData () {
      return [
        { label: '任务名称', width: '80', prop: 'taskName' },
        { label: '对接方式', width: '80', prop: 'dockingMethod', selectList: this.dockingMethodList },
        // { label: '协议', width: '80', prop: 'agreement', selectList: this.agreementList },
        // { label: '平台', width: '80', prop: 'platformName' },
        { label: '频率', width: '80', prop: 'unitName' },
        { label: '时间', width: '80', prop: 'frequency' },
        { label: '状态', width: '80', prop: 'status', selectList: this.statusOptions },
        { label: '创建人', width: '80', prop: 'creatName' },
        { label: '创建时间', width: '80', prop: 'createDate' },
        { label: '更新人', width: '80', prop: 'updateName' },
        { label: '更新时间', width: '80', prop: 'updateDate' },
        { label: '启用时间', width: '80', prop: 'startUsingTime' },
        { label: '停用时间', width: '80', prop: 'downTime' }
      ]
    }
  },
  methods: {
    search () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit()
        }
      })
    },
    addHandle () {
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
      this.dataForm.dockingMethod = ''
    },
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$refs.addDialog.init(this.dataForm.dockingMethod)
            this.handleClose()
          }
        })
      },
      1000,
      { leading: true, trailing: false }),
    addOrUpdateHandle (data) {
      this.$refs.updateDialog.init(data)
    },
    // 修改状态
    setStatus (id, data) {
      this.addOrUpdateItem({
        url: this.mixinViewModuleOptions.updateStatusURL,
        paramData: {
          id: id,
          status: data
        }
      }).then(() => {
        this.getDataList()
      })
    },
    deviceList (data) {
      this.$refs.deviceListDialog.init(data)
    }
  }
}
</script>
<style lang="scss" scoped>
.action-bar {
  width: 100%;
  display: flex;
  margin-bottom: 22px;

  .form-item {
    width: 200px;
  }

  .search {
    text-align: left;

    .el-button {
      border-radius: 4px !important;
    }
  }

  .operation-btn {
    flex: 1;
    text-align: right;
  }
}
</style>
